*{
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}

a{
	text-decoration: none;
}

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?7kkyc2');
    src:url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.focus{
	width: 721px;
	height: 455px;
	margin: 100px auto;
	/*background-color: pink;*/
	position: relative;
	overflow: hidden;
}

.focus ul{
	/*大盒子里面的ul默认和父亲一样宽，即使ul设了浮动，也无法在一行显示。
	所以要把里面的ul宽度弄的更宽一点(比父亲还宽)，这样4张图片才能在一行显示
	宽度设置的大一点是没有关系的*/
	width: 600%;

    /*因为animate.js中图片移动(注：是ul移动！！！而不是li移动)必须要定位，
    所以这个ul必须要加个定位*/
	position: absolute;
    top: 0;
    left: 0;
}

 .focus ul li {
 	float: left;
 }

.circle{
    position: absolute;
    bottom: 10px;
    left: 50px;
}
.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #ccc;
    font-family: 'icomoon';
    font-size: 18px;
    /*ul有定位，arrow_l,r也有定位，要提高层级，否则会被压住*/
    z-index: 2;
}

.arrow-r {
    right: 0;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}

.current {
    background-color: #fff;
}